{extend name="public/base" /}

<title>{block name="title"}物品信息{/block}</title>
{block name="menu"}
<div>
    <button type="button" class="layui-btn layui-bg-blue" id="add-adminuser">添加物品</button>
</div>
{/block}
{block name="main"}
<!-- 右侧主信息 -->
<div class="con-box" style="padding: 10px;">
    <div class="search-box">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">物品名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" value="" placeholder="请输入物品名称" class="layui-input">
                </div>
                <label class="layui-form-label">选择物品分类</label>
                <div class="layui-input-inline">
                    <select name="cate_id">
                        <option value="">请选择</option>
                        {foreach $cateList as $key=>$vo }
                        <option value="{$vo.id}">{$vo.title}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="formSearch">立即提交</button>
                </div>
            </div>
        </form>
    </div>
    <table class="layui-hide" id="user-data" lay-filter="user-data"></table>
</div>
<div id="add-box" style="display: none;">
    <form class="layui-form" action="" lay-filter="demo-val-filter">
        <input type="hidden" name="id">
        <input type="hidden" name="user_id">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">物品名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="请输入" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">商品数量</label>
                <div class="layui-input-inline">
                    <input type="text" name="stock" class="layui-input" lay-verify="required" placeholder="请输入商品数量"
                        value="">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品分类</label>
                <div class="layui-input-inline">
                    <select name="cate_id" lay-filter="cate_id">
                        <option value="">请选择分类</option>
                        {foreach $cateList as $key=>$vo }
                        <option value="{$vo.id}">{$vo.title}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">商品位置</label>
                <div class="layui-inline">
                    <select name="space_id" lay-filter="space_id" class="select-tree">
                        <option value="">请选择位置</option>
                        {foreach $spaceList as $key=>$vo }
                        <option value="{$vo.id}">{$vo.title}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">过期日期</label>
                <div class="layui-input-inline layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input type="text" name="end_time" id="end_time" lay-verify="date" placeholder="yyyy-MM-dd"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div id="image-box" class="layui-form-item" style="margin-left: 25px;">
            <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                <i class="layui-icon layui-icon-upload"></i> 单图片上传
              </button>
              <div style="width: 132px;">
                <div class="layui-upload-list">
                <input type="hidden" name="logo" id="logo" value="">
                  <img class="layui-upload-img" id="image" name="image" style="width: 100%; height: 92px;" > 
                  <div id="ID-upload-demo-text"></div>
                </div>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                  <div class="layui-progress-bar" lay-percent=""></div>
                </div>
              </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="btn-save">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
{/block}
{block name="javascript"}
<script>
    var controllername = 'admin/api_goods';
    var title = "物品";
    var filterArray = ["title","stock","end_time","logo","remark","cate_id","space_id","id","user_id"];
    var area = ["700px", "600px"];
    var cols = [ //标题栏
        { type: 'checkbox', fixed: 'left' },
        { field: 'id', title: 'ID', width: 80, sort: true },
        { field: 'title', title: '名称', width: 120 },
        { field: 'stock', title: '数量', width: 80 },
        { field: 'goodcate', title: '分类', width: 120, templet:function(d){
            return d.goodcate? d.goodcate.title:'';
        } },
        { field: 'goodspace.title', title: '位置', width: 150, templet:function(d){
            return d.goodspace? d.goodspace.title:'';
        } },
        { field: 'end_time', title: '过期时间', width: 120 },
        { field: 'create_time', title: '创建时间', width: 200 },
        { fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo' }
    ]

    // 日期
        layui.use(function () {
            var laydate = layui.laydate;
            var upload = layui.upload;
            var layer = layui.layer;
            var element = layui.element;
            var $ = layui.$;

            laydate.render({
                elem: '#end_time'
            });
            // 单图片上传
            var uploadInst = upload.render({
                elem: '#ID-upload-demo-btn',
                url: '/admin/api_admin/uploadImg', // 实际使用时改成您自己的上传接口即可。
                field: 'file',
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#image').attr('src', result); // 图片链接（base64）
                    });

                    element.progress('filter-demo', '0%'); // 进度条复位
                    layer.msg('上传中', { icon: 16, time: 0 });
                },
                done: function (res) {
                    // 若上传失败
                    if (res.code != 1) {
                        return layer.msg('上传失败');
                    }
                    $('#logo').attr('value', '/' + res.msg); // 图片链接（base64）
                    // 上传成功的一些操作
                    // …
                    $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                },
                error: function () {
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function (n, elem, e) {
                    element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', { icon: 1 });
                    }
                }
            });
        })

</script>
{/block}